<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式</title>
</head>

<body>
    <!-- <div>嘎嘎鸭</div>
    <span>嘎嘎鸡</span>
    <span>嘎嘎鸡</span>
    <span>嘎嘎鸡</span> -->
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: tomato;
        }

        span {
            width: 100px;
            height: 100px;
            /* 以上的宽高设置可以不用 */
            background-color: violet;
        }

        img {
            width: 400px;
            height: 400px;
        }

        a {
            width: 100px;
            height: 100px;
            background-color: wheat;
            /* display: block; */
            /* display: inline-block; */
            display: inline;
        }
    </style>
    <div>嘎嘎鸭</div>
    <span>嘎嘎鸡</span>
    <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.soumeitu.com%2Fwp-content%2Fuploads%2F2020%2F07%2F5f179e9eba4c3.jpg&refer=http%3A%2F%2Fwww.soumeitu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646103577&t=d18ee1b0c980780fe65aa67ec81e2bee">

    <a href="https://www.baidu.com/">穿越</a>
</body>

</html>